<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>1.vue动态绑定class样式</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <style>
        .one{
            height: 50px;
            width: 200px;
            background-color: aqua;
        }
        .two{
            height: 50px;
            width: 200px;
            background-color: rgb(0, 255, 136);
        }
        .three{
            height: 50px;
            width: 200px;
            background-color: rgb(255, 0, 13);
        }
    </style>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
                        <div class="one" v-bind:class="str">
                        绑定动态样式
                        </div>
                        <button @click="change">切换样式</button>
                        <br> <br> <br> <br>

                        <div class="one" v-bind:class="obj">
                        vue绑定动态样式
                            </div>
                            <button @click="changetwo">切换样式</button>
                            <button @click="changethree">切换样式</button>
                            <br> <br> <br> <br>
                            <div class="one" :class="arr">
                                vue绑定动态样式
                                </div>
                                <input type="text" @keyup.13="getValue" />
                                
                                <br> <br> <br> <br>
                        <div :style="styarr"> vue绑定动态样式</div>
        </div>
        
             
     </div>
     
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        new Vue({
            el:"#app",
            data:{
                str:"two",
                obj:{
                    two:false,
                    three:false
                },
                arr:[],
                sty:"width:300px;height: 200px;border: 1px solid red;background: blue;font-size:30px;color:white",
                styobj:{
                    width:"300px",
                    height:"200px",
                    border: "1px solid red",
                    backgroundColor:"blue",
                    fontSize:"30px",
                    color:"white"
                },
                styarr:[
                    {
                        width:"300px",
                        height:"200px",
                        border: "1px solid red",
                    },
                    {
                        backgroundColor:"blue",
                        fontSize:"30px",
                        color:"white"
                    }
                ]
            },
             methods:{
            change(){
               this.str= this.str==="two"?"three":"two"
            },
            changetwo(){
                this.obj.two=!this.obj.two
            },
            changethree(){
                this.obj.three=!this.obj.three
            },
            getvalue(e){
                this.arr.push(e.target.value)
            }
        }
        })
       
        
        
    </script>
</html>